<template>
  <el-row v-loading="loading" :gutter="10" style="justify-content: center; padding: 30px 0">
    <el-col v-for="(item, index) in datas" :key="index" :xs="24" :sm="3">
      <el-card :body-style="{ padding: '10px 0px' }" :class="`card-${index}`" class="text-center" shadow="never">
        <template #header>
          <span :class="`text-color-${index}`">{{ item.name }}</span>
          <!-- <span>项目进度</span> -->
        </template>
        <el-statistic :value="item.count" />
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { projectcount } from '@/api/system/index'

export default {
  name: 'SystemIndexCount',
  data() {
    return {
      loading: false,
      datas: []
    }
  },
  computed: {
    name() {
      return this.$t('common.Count statistic')
    }
  },
  watch: {
    name() {
      this.count()
    }
  },
  created() {
    this.count()
  },
  methods: {
    count() {
      this.loading = true
      projectcount()
        .then((res) => {
          console.log(res.data, '11111111111111')
          this.datas = [
            {
              name: '项目数量',
              count: res.data.count
            },
            {
              name: '任务总数',
              count: res.data.task_count
            },
            // {
            //   name: '已开展项目数',
            //   count: 258
            // },
            {
              name: '已完成任务数',
              count: res.data.finish_count
            },
            {
              name: '团队数量',
              count: res.data.team_count
            }
          ]
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style scoped>
.card-0 {
  background-color: #f0f8ff; /* 浅蓝色背景 */
}

.card-1 {
  background-color: #faebd7; /* 浅杏色背景 */
}

.card-2 {
  background-color: #e6e6fa; /* 浅紫色背景 */
}

.card-3 {
  background-color: #ffe4e1; /* 浅粉色背景 */
}

.card-4 {
  background-color: #f5f5dc; /* 米色背景 */
}

.text-color-0 {
  color: #4682b4; /* 深蓝色 */
  font-weight: bold;
}

.text-color-1 {
  color: #cd853f; /* 深杏色 */
  font-weight: bold;
}

.text-color-2 {
  color: #9370db; /* 深紫色 */
  font-weight: bold;
}

.text-color-3 {
  color: #cd5c5c; /* 深粉色 */
  font-weight: bold;
}

.text-color-4 {
  color: #8b4513; /* 深米色 */
  font-weight: bold;
}
</style>
